<template>
  <div>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="一级分类">
        <el-select placeholder="请选择" :value="category1Id" @change="setcategory1Id">
            <el-option :label="c1.name" :value="c1.id" v-for="c1 in category1List" :key="c1.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类">
        <el-select  placeholder="请选择" :value="category2Id" @change="setcategory2Id">
          <el-option :label="c2.name" :value="c2.id" v-for="c2 in category2List" :key="c2.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="三级分类">
        <el-select placeholder="请选择" :value="category3Id" @change="setcategory3Id">
          <el-option :label="c3.name" :value="c3.id" v-for="c3 in category3List" :key="c3.id"/>

        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { mapActions, mapState } from 'vuex'
export default {
  name: "CategorySelect",
  data() {
    return {

    };
  },
  mounted() {
    this.getCategoryList()
    this.getCategory2List()
  },
  computed: {
  ...mapState('category', 
  ['category1Id', 'category1List'],
  ['category2Id', 'category2List'],['category3Id', 'category3List'],
  ),
    ...mapState({
    category3List: state => state.category.category3List
  }) 
    
  },
  methods: {
    ...mapActions('category', ['get_Category1List', 'get_Category2List'],['get_Category2List', 'get_Category3List']),
    getCategoryList() {
      this.get_Category1List()
    },
    getCategory2List(){
      this.get_Category3List()
    },
    // changeCategory1Handler(category1Id) {
    //   console.log(category1Id);
    //   this.get_Category2List(category1Id)
    // },
    setcategory1Id(category1Id) {
      console.log(category1Id);
      this.$store.commit('category/SETCATEOGRY1ID', category1Id)
    },
    setcategory2Id(category2Id) {
      console.log(category2Id);
      this.$store.commit('category/SETCATEOGRY2ID', category2Id)
    },setcategory3Id(category3Id) {
      console.log(category3Id);
      this.$store.commit('category/SETCATEOGRY3ID', category3Id)
    }
  }
}
</script>
<style scoped lang="less"></style>